<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <h1>我是运行在3000端口上的html文件</h1>
    <!-- <img src="https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg" alt="" srcset=""> -->
    <button class="btn1">点击我发送ajax请求</button>
    <button class="btn2">请求接口</button>

    <script>
        // console.log(a);
        // 解决跨域问题 ： 利用jsonp  
        // jsonp 原理 ： 利用script标签的不跨域特性 实现跨域请求；

        // let btnEle1 = document.querySelector(".btn1");
        // btnEle1.onclick = function () {
        //     let xhr = new XMLHttpRequest();
        //     xhr.open("get", "http://localhost:4000/getdata");   // http://localhost:3000/getdata;
        //     xhr.send();
        //     xhr.onload = function () {
        //         if (xhr.readyState === 4) {
        //             console.log(xhr.responseText);
        //         }
        //     }
        // }

        function myfn(res) {
            console.log("hello", res);
        }
        let btnEle1 = document.querySelector(".btn1");
        btnEle1.onclick = function () {
            let s = document.createElement("script");
            s.src = "http://localhost:4000/test?cb=myfn";
            document.head.appendChild(s);
        }

        // let btnEle2 = document.querySelector(".btn2");
        // btnEle2.onclick = function () {
        //     let s = document.createElement("script");
        //     s.src = "https://toy1.weather.com.cn/search?cityname=武汉&cb=myfn";
        //     document.head.appendChild(s);
        // }




    </script>
    <!-- <script src="http://localhost:4000/test?cb=myfn"></script> -->
</body>

</html>